<template>
  <div style="padding-bottom: 40px">
    <ArticleItem
      v-for="(item, index) in list"
      :key="index"
      :item="item"
    ></ArticleItem>
    <van-list
      :finished="finished"
      @load="onLoad"
      finished-text="没有更多了"
      offset="100"
      v-model="loading"
    >
      <van-cell
        :key="item.id"
        :title="item.stem"
        style="margin: 30px 0"
        v-for="item in list"
      />
    </van-list>
  </div>
</template>

<script>
import { getArticlesLike } from '@/api/live.js'
export default {
  name: '',
  data () {
    return {
      obj: {
        optType: 1,
        page: 0,
        pageSize: 8,

      },
      total: 0,
      loading: false,
      finished: false,
      list: []
    }
  },
  created () {
    // this.fn()
  },
  computed: {
  },
  methods: {
    async fn () {
      const res = await getArticlesLike(this.obj)
      console.log(res, 1111111);
      // this.list = res.data.rows
      this.total = res.data.total
      this.list = [...this.list, ...res.data.rows]
      this.loading = false // 加载状态结束

    },
    onLoad () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout(() => {
      //   for (let i = 0; i < 10; i++) {
      //     this.list.push(this.list.length + 1);
      //   }

      //   // 加载状态结束
      //   this.loading = false;

      //   // 数据全部加载完成
      //   if (this.list.length >= 40) {
      //     this.finished = true;
      //   }
      // }, 1000);
      if (this.obj.page * this.obj.pageSize > this.total) {
        this.finished = true;
        return
      }
      this.obj.page++
      this.fn()
    },
  },
}

</script>
<style lang="less" scoped>
.like-page {
  margin-bottom: 50px;
  margin-top: 44px;
}
</style>